<!DOCTYPE html>
<html>
<head>
    <title>爬取文章</title>
    <link rel="stylesheet" th:href="@{/css/sidebar.css}" />
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex; /* 使用 flex 布局 */
        }

        #content-container {
            flex: 1;
            margin-left: 20px;
        }

        #header {
            display: flex;
            align-items: center;
        }

        #header h1 {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div th:replace="sidebar.html :: sidebar"></div>
<div id="content-container">
    <div id="header">
        <h1>爬取文章</h1>
        <button onclick="downloadArticle()">下载文章</button>
    </div>
    <div id="result"></div>
</div>

<script>
    var params = new URLSearchParams(window.location.search);
    var website = params.get('website');
    var columnTitle = params.get('columnTitle');
    var articleUrl = params.get('articleUrl');
    var request = { website: website, columnTitle: columnTitle, articleUrl: articleUrl };

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:9001/crawl/crawlArticle', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            displayResult(response.data);
        }
    };
    xhr.send(JSON.stringify(request));

    function displayResult(htmlContent) {
        var resultDiv = document.getElementById('result');
        resultDiv.innerHTML = htmlContent;
    }

    function downloadArticle() {
        var resultDiv = document.getElementById('result');
        var htmlContent = resultDiv.innerHTML;
        var title = columnTitle;  // 根据需要修改为实际的文章标题

        var downloadRequest = {
            htmlContent: htmlContent,
            title: title,
            website: website,
            columnTitle: columnTitle
        };
        var downloadXhr = new XMLHttpRequest();
        downloadXhr.open('POST', 'http://localhost:9001/crawl/downloadArticle', true);
        downloadXhr.setRequestHeader('Content-Type', 'application/json');
        downloadXhr.responseType = 'blob';
        downloadXhr.onreadystatechange = function() {
            if (downloadXhr.readyState === 4 && downloadXhr.status === 200) {
                var blob = downloadXhr.response;
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = title + '.pdf';  // 根据需要修改下载文件的名称
                link.click();
            }
        };
        downloadXhr.send(JSON.stringify(downloadRequest));
    }
</script>
</body>
</html>